<template>
	<!-- 修改密码、资金密码验证 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model+' '+(model=='light'?'p-stickyLight':'')">
			<view class="status_bar">
		
			</view>
			<view class="nav_bar flex align-center justify-between">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{type==1?i18n.l036:i18n.l037}}
				</view>
				<view class="f0 p-3 opacity0">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="pt-3">
			
		</view>
		<view class="tabList px-5 flex align-center">
				<view @click="changeTabId(1)"
					v-if="mobileNumber"
					:class="['tabItem A-Bold mr-6',verifyType == 1 ? model=='light'?'tabItem2Light':'tabItem2':'']">
					{{i18n.l038}}
					<view v-if="verifyType == 1" class="bar">
						
					</view>
				</view>
				<view @click="changeTabId(2)"
					v-if="email"
					:class="['tabItem A-Bold mr-6',verifyType == 2 ? model=='light'?'tabItem2Light':'tabItem2':'']">
					{{i18n.l039}}
					<view v-if="verifyType == 2" class="bar">

					</view>
				</view>
			</view>
		<view class="formWrap px-5 A-Regular">
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input type="text" v-model="code" :placeholder="i18n.l014" class="flex-1 inputText A-Medium"
					:class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
				<view v-if="codeText == 60" @click="sendCode" class="codeText A-Medium pl-3">
					{{i18n.l015}}
				</view>
				<view v-else class="codeText A-Medium pl-3">{{codeText + 's'}}</view>
			</view>
		</view>
		<view class="codeDesc mt-2 A-Medium mx-6">
			<!-- {{i18n.l040}}{{account}}{{i18n.l041}} -->
			{{ verifyType==1 ? i18n10.n158 : i18n10.n002}}
		</view>
		<!-- 提交按钮 -->
		<view @click="submit" class="btn mx-auto A-Medium mt-8 clickCss">
			{{i18n.l035}}
		</view>
		
	</view>
</template>

<script>
	import {
		getMobileVerifyCode,
		getEmailVerifyCode,
		checkMobileVerifyCode,
		checkEmailVerifyCode
	} from "@/core/api/user.js";
	export default {
		data(){
			return{
				type:1,//1登录密码 2资金密码
				verifyType: 1,//1手机号 2邮箱
				mobileNumber: '',
				email: '',
				code: '', //验证码
				codeText: 60, //
				codeTimer: null,
				sendFlag: false
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('login');
			},
			i18n2() {
				return this.$t('showToast');
			},
			i18n10() {
				return this.$t('newObj');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		onLoad(options) {
			let obj = this.$tool.changeOptions(options.obj);
			this.type = obj.type;
			this.mobileNumber = obj.mobileNumber;
			this.email = obj.email;
			if(!this.mobileNumber){
				this.verifyType = 2
			} else if(!this.email){
				this.verifyType = 1
			}
			
			// let obj2 = {
			// 	type:this.type,
			// 	verifyType:this.verifyType,
			// }
			// this.$tool.navTo(this.$tool.handleUrl('/pages/mine/upDatePass',obj2),2);
		},
		methods:{
			// 发送验证码
			async sendCode() {
				if(this.sendFlag){
					return;
				}
				if(this.account===''){
					if(this.verifyType==1){
						this.$tool.showToast(this.i18n2.st001);
					}else if(this.verifyType==2){
						this.$tool.showToast(this.i18n2.st002);
					}
					return;
				}
				
				this.$tool.showLoading();
				this.sendFlag = true;
				this.sendCodeAfter();
				if (this.verifyType == 1) {
					await getMobileVerifyCode({
						phoneNumber: this.mobileNumber,
					}).then(res => {
						
					})
				} else if (this.verifyType == 2) {
					await getEmailVerifyCode({
						email: this.email,
					}).then(res => {
						
					})
				}
			},
			// 发送验证吗数据处理
			sendCodeAfter(){
				if(!this.codeTimer){
					this.codeTimer = setInterval(e => {
						if (this.codeText == 0) {
							this.codeText = 60;
							clearInterval(this.codeTimer);
							this.codeTimer = null;
							this.sendFlag = false;
							return;
						}
						this.codeText--;
						uni.hideLoading();
					}, 1000)
				}
			},
			// 校验验证码
			submit(){
				if(this.verifyType==1 && this.mobileNumber === ''){
					this.$tool.showToast(this.i18n2.st001);
				}else if(this.verifyType==2 && this.mobileNumber === ''){
					this.$tool.showToast(this.i18n2.st002);
				}
				
				if(this.code===''){
					this.$tool.showToast(this.i18n2.st003);
					return;
				}
				if(this.verifyType==1){
					this.$tool.showLoading();
					checkMobileVerifyCode({
						mobileNumber:this.mobileNumber,
						verifyCode:this.code
					}).then(res=>{
						this.submitAfter();
					}).catch(err=>{
						uni.hideLoading();
					})
				}else if(this.verifyType==2){
					this.$tool.showLoading();
					checkEmailVerifyCode({
						email:this.email,
						verifyCode:this.code
					}).then(res=>{
						this.submitAfter();
					}).catch(err=>{
						uni.hideLoading();
					})
				}
			},
			// 校验验证码数据处理
			submitAfter(){
				uni.hideLoading();
				let obj = {
					type:this.type,
					verifyType:this.verifyType,
				}
				this.$tool.navTo(this.$tool.handleUrl('/pages/mine/upDatePass',obj),2);
			},
			changeTabId(type){
				this.verifyType = type
			}
		}
	}
</script>

<style scoped lang="scss">
	.p-stickyLight {
		background: #fff;
	}
	.formWrap {
		.formTitle {
			font-size: 28rpx;
			color: #7F838D;
			margin-bottom: 22rpx;
		}
	
		.inputWrap {
			width: 650rpx;
			height: 88rpx;
			background: #16181C;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			
			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
				// text-align: right;
			}
			.inputTextLight {
				color: #0E0F11;
			}
			
			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}
	
			.placeholderClassLight {
				color: #B5B7BF;
			}
	
			.codeText {
				font-size: 28rpx;
				color: #5951BA;
			}
		}
	
		.inputWrapLight {
			background: #FFFFFF;
		}
	}
	
	.btn {
		width: 650rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}
	.codeDesc {
		font-size: 24rpx;
		color: #7F838D;
	}
	.tabList {
		margin-bottom: 32rpx;
		font-size: 32rpx;
	
		.tabItem {
			color: #7F838D;
			position: relative;
	
			.bar {
				width: 140rpx;
				height: 6rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background: linear-gradient(90deg, #5951BA 35%, rgba(89, 81, 186, 0) 100%);
			}
		}
	
		.tabItem2 {
			color: #F7F7F7;
		}
	
		.tabItem2Light {
			color: #0E0F11;
		}
	}
</style>